<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>

	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td><input type="checkbox" v-model="all"
								@change="list.forEach(item => item.selected = all)" /></td>
						<td>商品名</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list">
						<td><input type="checkbox" v-model="item.selected" @change="changeState()" /></td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td><button @click="item.num>1?item.num--:item.num">-</button></td>
						<td>{{item.num}}</td>
						<td><button @click="item.num++">+</button></td>
						<td>{{item.num*item.price}}</td>
						<td><button @click="list = list.filter(item => item.id != id)">delete</button></td>
					</tr>
				</tbody>
				<tfoot>
					<tr colspan="6">
						<td>总价：{{sum}}</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>

</html>

<script>
	const {
		createApp
	} = Vue

	createApp({
		data() {
			return {
				all: false,
				list: [{
					id: 1,
					name: "苹果手机",
					num: 1,
					price: 100,
					selected: false
				}, {
					id: 2,
					name: "华为手机",
					num: 1,
					price: 200,
					selected: false
				}, {
					id: 3,
					name: "小米手机",
					num: 1,
					price: 300,
					selected: false
				}, {
					id: 4,
					name: "vivo手机",
					num: 1,
					price: 400,
					selected: false
				}, {
					id: 5,
					name: "oppo手机",
					num: 1,
					price: 500,
					selected: false
				}],
			}
		},
		methods: {
			changeState() {
				this.all = this.list.every(item => item.selected)
			}
		},
		computed: {
			sum() {
				return this.list.reduce((sum, item) => {
					return item.selected ? sum += item.num * item.price : sum
				}, 0)
			}
		}
	}).mount('#app') 
</script>